<template>
  <div class="register">
    <div class="bgc"><img src="../assets/images/bgc.png" alt="" /></div>
    <div class="reduce">
      <div class="reduce-top">
        <div class="test-top-left"></div>
        <div class="test-top-right">活动介绍</div>
      </div>
      <div class="play-content">
        <div class="title">1.什么是成长计划：</div>
        <div class="content">
          OpenHarmony开源开发者成长计划，是一项为了鼓励开发者积极参与开源软件的开发维护，帮助开发者在开源项目中成长的社会公益活动，活动为开发者提供OpenHarmony开源项目的实践机会及经费资助。
        </div>
      </div>
      <div class="play-content" style="margin-top:20px">
        <div class="title titleplay">2.活动内容：</div>
        <div class="content">
          本期活动面向高校学生群体，鼓励学生进行开源项目实践，过程中提供导师辅导，为完成项目的学生提供适当的经费支持，帮助学生在实践中获得成长。单项项目资助金额最高可达15000元！
        </div>
      </div>
      <div class="play-content" style="margin-top:20px">
        <div class="title titleplay">3.参与指南：</div>
        <div class="content">
          (1)：在官网获取项目列表并选择1个项目申领
        </div>
        <div class="content">
          (2)：认领项目请在7日内提交项目申请书，未提交视为自动放弃该项目，题目释放
        </div>
        <div class="content">
          (3)：项目认领成功即可与导师取得联系
        </div>
        <div class="content">
          (4)：提交结项申请，等待结项考核
        </div>
        <div class="content">
          (5)：资助说明：完成结项考核即可获得对应项目资助。
        </div>
      </div>
      <div class="play-code" style="margin-top:20px">
        <div class="left">
          <div class="code">关注群二维码</div>
          <img src="../assets/images/code.png" alt="" />
        </div>
        <div class="right">
          <div class="top">
            <img src="../assets/images/email.png" alt="" /><span
              >咨询邮箱：</span
            >
          </div>
          <div class="bot">growing@mail.openharmony.io</div>
        </div>
      </div>
    </div>
    <div class="progross">
      <div class="progross-top">
        <div class="test-top-left"></div>
        <div class="test-top-right">活动流程</div>
      </div>
      <div class="introduce-progross">
        <div class="img1">
          <img src="../assets/images/play1.png" alt="" />
          <div class="txt">10月24日-11月24日</div>
          <div class="txt">项目领取时间</div>
        </div>
        <div class="line">
          <img src="../assets/images/row.png" alt="" />
        </div>
        <div class="img1">
          <img src="../assets/images/play2.png" alt="" />
          <div class="txt">11月24日-2月24日</div>
          <div class="txt">项目完成时间</div>
        </div>
        <div class="line">
          <img src="../assets/images/row.png" alt="" />
        </div>
        <div class="img1">
          <img src="../assets/images/play3.png" alt="" />
          <div class="txt">2月24日-3月15日</div>
          <div class="txt">项目评审时间</div>
        </div>
        <div class="line">
          <img src="../assets/images/row.png" alt="" />
        </div>
        <div class="img1">
          <img src="../assets/images/play4.png" alt="" />
          <div class="txt">3月15日</div>
          <div class="txt">资助项目公布</div>
        </div>
      </div>
    </div>
    <div class="test-top">
      <div class="test-top-left"></div>
      <div class="test-top-right">挑选项目</div>
    </div>
    <div class="test-content">
      <div class="test-content-title">
        <div
          class="origin"
          v-for="item in titleList"
          :key="item.id"
          @click="changeTab(item)"
          :class="{ curentClass: curentId == item.id }"
        >
          {{ item.val }}
        </div>
      </div>
      <div class="test-content-list">
        <div class="subjectClass" v-for="(item, index) in list" :key="item.id">
          <div class="left" @click="toDetail(item)">
            <div class="left-name">
              <span>{{ index + 1 + "、" }}</span
              >{{ item.subjectName }}
            </div>
          </div>
          <div class="right">
            <div
              class="right-status"
              :style="{
                color:
                  item.signUpStatus == '待申请'
                    ? '#F63011'
                    : item.signUpStatus == '已认领'
                    ? '#5DAC60'
                    : '#FFA200',
              }"
            >
              {{ item.signUpStatus }}
            </div>
          </div>
        </div>
        <div class="waiting" v-if="list.length <= 0">待开放</div>
      </div>
    </div>
    <div class="test-top">
      <div class="test-top-left"></div>
      <div class="test-top-right">导师团队</div>
    </div>
    <div class="test-pic">
      <img src="../assets/images/teacher.png" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      titleList: [
        //标题
        { id: 1, val: "系统应用开发" },
        { id: 2, val: "操作系统开发" },
        { id: 3, val: "文档共建" },
        // { id: 4, val: "测试" },
      ],
      list: [],
      project: "系统应用开发",
      curentId: "1",
    };
  },
  created() {
    this.search();
  },
  methods: {
    async search() {
      let res = await this.$axios.get("/signUp/getSubjectByCategory", {
        params: { project: this.project },
      });
      if (res.data.code == 0) {
        this.list = res.data.data;
      }
    },
    changeTab(item) {
      this.curentId = item.id;
      this.project = item.val;
      this.search();
    },
    toDetail(row) {
      console.log(row);
      // if (row.signUpStatus == "已认领" || row.signUpStatus == "审核中") {
      //   this.$message.warning("请点击待申请的课题");
      // } else {

      // }
      sessionStorage.setItem("newdetail", JSON.stringify(row));
      this.$router.push("/detail");
    },
  },
};
</script>
<style lang="less" scoped>
.bac {
  height: 20px;
  line-height: 20px;
}
.basec {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .test-top-left {
    width: 4px;
    height: 24px;
    background: #385bbc;
    margin-right: 12px;
  }
  .test-top-right {
    height: 32px;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: #000000;
    opacity: 0.9;
  }
}
.register {
  height: 100%;
  padding: 0 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .test-top {
    .basec;
    width: 100%;
  }
  .bgc {
    text-align: center;
    img {
      width: 100%;
    }
  }
  .reduce {
    margin-bottom: 60px;
    margin-top: -55px;
    .reduce-top {
      .basec;
    }
    .play-content {
      .title {
        height: 21px;
        font-size: 16px;
        font-weight: 700;
        line-height: 21px;
        color: #000000;
        opacity: 0.9;
        margin-bottom: 12px;
        width: 144px;
        border-bottom: 2px solid #385bbc;
      }
      .titleplay {
        width: 96px;
      }
      .content {
        text-indent: 2em;
        font-size: 14px;
        font-weight: 400;
        line-height: 28px;
        color: #000000;
        opacity: 0.9;
      }
    }
    .play-code {
      display: flex;
      margin-left: 2em;
      .left {
        margin-right: 20px;
        .code {
          font-size: 12px;
          font-weight: 500;
          line-height: 16px;
          color: #000000;
        }
        img {
          width: 72px;
          height: 72px;
          margin-top: 4px;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: end;
        .top {
          img {
            width: 20px;
            height: 20px;
          }
          span {
            font-size: 16px;
            font-weight: 400;
            line-height: 21px;
            color: #000000;
          }
        }
        .bot {
          font-size: 12px;
          font-weight: 400;
          line-height: 16px;
          color: #000000;
          opacity: 0.9;
          padding-bottom: 14px;
          margin-top: 8px;
        }
      }
    }
  }
  .progross {
    width: 100%;
    margin-bottom: 60px;
    .progross-top {
      .basec;
    }
    .introduce-progross {
      display: flex;
      justify-content: space-between;
      .img1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 64px;
          height: 64px;
          margin-bottom: 24px;
        }
        .txt {
          font-size: 14px;
          font-weight: 400;
          line-height: 18px;
          color: #000000;
          opacity: 0.9;
        }
      }
      .line {
        height: 64px;
        display: flex;
        align-items: center;
        img {
          width: 50%;
          transform: translate(50%);
        }
      }
    }
  }
  .test-content {
    margin-bottom: 60px;
    width: 100%;
    .test-content-title {
      display: flex;
      margin-bottom: 24px;
      // justify-content: space-between;
      .origin {
        width: 180px;
        height: 72px;
        line-height: 72px;
        text-align: center;
        background: #fff;
        border-radius: 6px;
        cursor: pointer;
        font-size: 24px;
        color: #000000;
        opacity: 0.9;
        margin-right: 20px;
      }
      .curentClass {
        background: #4760ff;
        color: #ffffff;
        box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.16);
      }
    }
    .test-content-list {
      background-color: #fff;
      min-height: 200px;
      max-height: 500px;
      overflow: auto;
      .subjectClass {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.6);
        margin: 0 20px;
        border-bottom: 0.25px solid rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-between;
        .left {
          max-width: 80%;
          padding: 17px 0 17px 0px;
          display: flex;
          cursor: pointer;
          .left-name {
            padding-right: 30px;
            .bac;
          }
          .left-day {
            font-size: 12px;
            opacity: 0.9;
            .bac;
          }
        }
        .right {
          display: flex;
          padding: 17px 0 17px 0px;
          .right-status {
            .bac;
          }
          .right-detail {
            .bac;
            img {
              width: 14px;
              height: 14px;
              margin: 0 2px 0 30px;
            }
            .light {
              cursor: pointer;
              color: #0a59f7;
            }
            .dark {
              cursor: not-allowed;
              color: gray;
            }
          }
        }
      }
      .waiting {
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 11;
        font-size: 18px;
        color: gray;
      }
    }
  }
  .test-pic {
    width: 100%;
    img {
      width: 100%;
    }
  }
}
@media screen and (max-width: 500px) {
  .register {
    padding: 0 10px;
    .progross {
      .introduce-progross {
        .img1 {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: start;
          img {
            width: 36px;
            height: 36px;
          }
          .txt {
            font-size: 12px;
            width: 66px;
          }
        }
        .line {
          height: 36px;
        }
      }
    }
    .test-content {
      .test-content-title {
        .origin {
          height: 28px;
          line-height: 28px;
          background: #fff;
          border-radius: 4 px;
          cursor: pointer;
          color: #000000;
          opacity: 0.9;
          margin-right: 10px;
          padding: 0 10 px;
          font-size: 14px;
        }
        .curentClass {
          background: #4760ff;
          color: #ffffff;
          box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.16);
        }
      }
    }
  }
}
</style>
